import 'package:flutter/material.dart';



///////////////////////////////////////////////////////////////////////////////////////////////
///                                    
/// 手指在蓝色矩形区域内移动即可看到当前指针偏移，当触发指针事件时，参数PointerDownEvent、
/// PointerMoveEvent、PointerUpEvent都是PointerEvent的一个子类，PointerEvent类中包
/// 括当前指针的一些信息，如：
/// 
///   - position：它是鼠标相对于当对于全局坐标的偏移。
///   - delta：两次指针移动事件（PointerMoveEvent）的距离。
///   - pressure：按压力度，如果手机屏幕支持压力传感器(如iPhone的3D Touch)，此属性会更有意义，
///     如果手机不支持，则始终为1。
///   - orientation：指针移动方向，是一个角度值。
/// 
///////////////////////////////////////////////////////////////////////////////////////////////
/// 
/// behavior属性，它决定子组件如何响应命中测试，它的值类型为HitTestBehavior，这是一个枚举类，有三个枚举值：
/// 
/// - deferToChild：子组件会一个接一个的进行命中测试，如果子组件中有测试通过的，则当前组件通过，这就意味着，
///   如果指针事件作用于子组件上时，其父级组件也肯定可以收到该事件。
/// 
/// - opaque：在命中测试时，将当前组件当成不透明处理(即使本身是透明的)，最终的效果相当于当前Widget的整个区
///   域都是点击区域。
/// 
/// - translucent：当点击组件透明区域时，可以对自身边界内及底部可视区域都进行命中测试，这意味着点击顶部组件
///   透明区域时，顶部组件和底部组件都可以接收到事件
/// 
///////////////////////////////////////////////////////////////////////////////////////////////



class PointerEventPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    PointerEvent _event;
    return Scaffold(
      appBar: AppBar(
        title: Text("Pointer Event"),
      ),
      body: StatefulBuilder(builder: (context, _setState) {
        return Flex(
          direction: Axis.vertical,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Listener(
                child: Container(
                  color: Colors.red[100],
                  alignment: Alignment.center,
                  child: MouseRegion(
                    onEnter: (event) => _setState(() => _event = event),
                    onExit: (event) => _setState(() => _event = event),
                    onHover: (event) => _setState(() => _event = event),
                    child: Padding(
                      padding: EdgeInsets.all(30),
                      child: Container(
                        color: Colors.red[200],
                        child: Text("当前label响应MouseRegion事件，整个背景响应Pointer事件\n\n${_event.toString()}"),
                      )
                    ),
                  )
                ),
                onPointerDown: (event) => _setState(() => _event = event),
                onPointerMove: (event) => _setState(() => _event = event),
                onPointerCancel: (event) => _setState(() => _event = event),
              )
            ),

            /// 假如我们不想让某个子树响应PointerEvent的话，我们可以使用IgnorePointer和AbsorbPointer，
            /// 这两个组件都能阻止子树接收指针事件，不同之处在于AbsorbPointer本身会参与命中测试，
            /// 而IgnorePointer本身不会参与，这就意味着AbsorbPointer本身是可以接收指针事件的(但其子树不
            /// 行)，而IgnorePointer不可以.
            Expanded(
              flex: 1,
              child: Listener(
                child: Container(
                  color: Colors.blue[100],
                  alignment: Alignment.center,
                  child: AbsorbPointer(
                    child: Listener(
                      child: Container(
                        color: Colors.blue,
                        width: 200,
                        height: 180,
                      ),
                      onPointerDown: (event) => print("in"),
                    ),
                  ),
                ),
                onPointerDown: (event) => print("up"),
              )
            )
          ],
        );
      }),
    );
  }
}

// class PointerEventPage extends StatefulWidget {
//   @override
//   _PointerEventPageState createState() => _PointerEventPageState();
// }

// class _PointerEventPageState extends State<PointerEventPage> {

//   PointerEvent _event;

//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: Text("Pointer Event"),
//       ),
//       body: Flex(
//         direction: Axis.horizontal,
//         children: <Widget>[
//           Expanded(
//             flex: 1,
//             child: Listener(
//               child: Container(
//                 color: Colors.red[100],
//                 alignment: Alignment.center,
//                 width: double.infinity,
//                 height: double.infinity,
//                 child: MouseRegion(
//                   onEnter: (event) => setState(() => _event = event),
//                   onExit: (event) => setState(() => _event = event),
//                   onHover: (event) => setState(() => _event = event),
//                   child: Padding(
//                     padding: EdgeInsets.all(30),
//                     child: Container(
//                       color: Colors.red[200],
//                       child: Text("当前label响应MouseRegion事件，整个背景响应Pointer事件\n\n${_event.toString()}"),
//                     )
//                   ),
//                 )
//               ),
//               onPointerDown: (event) => setState(() => _event = event),
//               onPointerMove: (event) => setState(() => _event = event),
//               onPointerCancel: (event) => setState(() => _event = event),
//             )
//           )
//         ],
//       ),
//     );
//   }
// }